<template>
   <div>
        <!-- header -->
        <mt-header title="史上最帅管理系统"></mt-header>
        <!-- 过渡的时候 旧元素还未完全移除就进入新元素  所以 mode="out-in"  -->
        <transition name="router" mode="out-in">
            <router-view></router-view>
        </transition>
        <!-- bottom -->
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" :to="{name: 'home'}">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name: 'member'}">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name: 'shopcart'}">
				<span class="mui-icon mui-icon-contact"><span class="mui-badge">{{pickNum}}</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" :to="{name: 'search'}">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">查找</span>
			</router-link>
        </nav>
   </div>
</template>

<script>
import connect from './components/common/connect.js'
import prodTools from './components/common/prodTools.js'

   export default {
       data() {
       return {
           pickNum: prodTools.getTotalCount()
       }
   },
   created() {
       // 这里的this是VueComponent
       //    console.log(connect) 因为不一样 所以使用箭头函数  
       connect.$on('addShopcart',num => {
            // this 就是 connect 而不是VueComponent
           
           console.log('接受到了')
           this.pickNum = this.pickNum + num;
       })
   }
 }
</script>

<style scoped>
    .router-enter-active,.router-leave-active{
        transition: opacity .3s;
    }
    .router-enter,.router-leave-to{
        opacity: 0;
    }
</style>
